<template>
  <div :class="wrpCls">
    <password-form ref="password" @ok="handlePasswordOk"/>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" @handlePassword="handlePassword"/>
    <!-- <select-lang :class="prefixCls" /> -->
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import PasswordForm from './password-form'
import { ownerPassword } from '@/api/base'
export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang,
    PasswordForm
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    },
    currentUser () {
      return {
        name: this.$store.state.user.name || ''
      }
    }
  },
  methods: {
    handlePassword () {
      this.$refs.password.visible = true
    },
    handlePasswordOk () {
      const form = this.$refs.password.form
      form.validateFields((errors, values) => {
        if (!errors) {
          ownerPassword(values).then(res => {
            this.$refs.password.visible = false
            this.$message.success('修改成功')
            form.resetFields()
            this.$store.dispatch('Logout').then(() => {
              this.$router.push({ name: 'login' })
            })
          }, () => {})
        }
      })
    },
  }
}
</script>
